<template>
  <div class="system_informs">
    <ul v-if="!informs">
      <div class="remove">
        <button @click="removeLetterInforms">删除已读</button>
      </div>
      <li class="informs" v-for="item in letterInforms" :key="item.letterid" @click="lookInforms(item.letterid)">
        <div class="informs_info">
          <svg class='icon' aria-hidden='true'>
            <use :xlink:href='isLook(item.islook)'></use>
          </svg>
          <span>{{item.name}}</span>
        </div>
        <div class="time">
          <span>{{timer(item.time)}}</span>
        </div>
      </li>
    </ul>
    <div class="content" v-else>
      <span class="return" @click="back">&lt; 返回</span>
      <span class="text" v-html="informs.text"></span>
    </div>
    
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import tool from "../../../assets/js/tool"
export default {
  name: 'Letterinforms',

  data() {
    return {
      informs: null // 消息对象
    };
  },

  props: {
    // 所有消息数据集
    letterInforms:Array
  },

  computed: {
    // 返回是否查看图标
    isLook(){
      return (i) => i == 0 ? '#icon-xinjian1' : '#icon-xinjian'
    },
    timer(){
      return (t) => tool.GetTimer(t)
    }
  },

  methods: {
    // 查看消息
    lookInforms(id){
      this.$api.lookInforms({id,type:'letter'}).then((res) => {
        if(res instanceof Object){
          this.informs = res
        }else{
          this.showHint({title:res,isFlag:false})
        }
      })
    },
    // 关闭查看
    back(){
      this.informs = null
    },
    // 删除所有已读消息
    removeLetterInforms(){
      if(this.$parent.letterLook == this.letterInforms.length){
        this.showHint({title:'没有已读消息!',isFlag:false})
        return
      }
      this.$api.removeInforms({type:'letter'}).then(res => {
        if(res == 1){
          this.showHint({title:'删除成功',isFlag:true})
          this.$emit('remove')
        }
      })
    },
    ...mapActions(['showHint'])
  },
};
</script>

<style scoped>
.system_informs{
  width: 100%;
  font-size: 0.8rem;
  width: 104%;
  max-height: 300px;
  overflow-y: scroll;
}
.system_informs .informs{
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid gray;
}
.informs .informs_info{
  display: flex;
  align-items: center;
}
.informs .time{
  font-size: 0.5rem;
  color: gray;
}
.system_informs .informs:hover{
  background-color: green;
}
.informs .icon{
  font-size: 1.5rem;
  margin-right: 4px;
}
.content{
  padding: 10px;
  text-indent: 1em;
}
.content .return{
  cursor: pointer;
  color: gray;
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.content .return:hover{
  color: blue;
}
.system_informs .remove{
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: flex-end;
}
.system_informs .remove button{
  padding: 4px;
  background-color: green;
  color: white;
  font-size: 0.7rem;
  cursor: pointer;
}
</style>